/*
 * depend u-chart.js
 * 
 * 基于uchart的波形数据的封装
 * 
 * mehtods:
 * 	updateConfig(config) 更新配置
 * 	push(data)			 加入一条数据或多条
 * 	render				 渲染
 * 
 * example
 * 		var chart = new ChartUI(this, "canvasLineA");
 * 
 * 		// 修改uchart配置
 *		chart.updateConfig({
 *			series: {
 *				color: "006BFF",
 *			},
 *			xAxis: {
 *				gridColor: "#00FF",
 *			},
 *			fontSize: "10px",
 *		});
 * 		chart.render();
 * 		
 * 		// 模拟websocket客户端接收数据
 * 		setInterval(function() {
 *			chartobj1.push(Math.random() * 10);
 *		}, 100)
 */

'use strict';
import uCharts from '@/components/u-charts.js';

/**
 * @param object _self 			调用页面的this指针
 * @param string id    			被渲染的canvas在页面的id名称
 * @param int    cateoriesNum 	图表类别个数
 * @param int	 seriesNum		类别对应数据个数
 * @param color  seriesColor	数据线条颜色
 */
var ChartUI = function ChartUI(_self, id, categoriesNum = 100, seriesNum = 100, seriesColor = '#007AFF') {
	this._self = _self;
	// 数据类别个数
	this.categoriesNum = categoriesNum;
	// 显示数据个数
	this.seriesNum = seriesNum;
	// canvas 页面渲染html节点id
	this.id = id;
	// seriesColor 线条颜色
	this.seriesColor = seriesColor;
	// uchart实例化对象
	this.uchart = {};
	// uchart默认配置
	this.config = {};
	// 接收到的数据
	this.dataList = [];
	// 定时器
	this.timer = {};

	// this.init(_self);
	// this.getServerData(_self);
	// this.render(); 
};

ChartUI.prototype.setWH = function(categoriesNum, seriesNum, width, height, seriesColor) {
	this.categoriesNum = categoriesNum;
	this.seriesNum = seriesNum;
	this.width = width;
	this.height = height;
	this.seriesColor = seriesColor;
};

ChartUI.prototype.push = function(data) {
	if (data instanceof Array) {
		for (var i = 0; i < data.length; i++) {
			this.dataList.push(data[i]);
		}
	} else {
		this.dataList.push(data);
	}

};

ChartUI.prototype.initConfig = function() {
	var categories = new Array(this.categoriesNum).fill(0);
	categories[this.categoriesNum-1] = 'a';
	var seriesData = new Array(this.seriesNum).fill(0);
	this.config = {
		$this: this._self,
		canvasId: this.id,
		type: 'line',
		fontSize: 11,
		legend: {
			show: false
		},
		dataLabel: false,
		dataPointShape: false,
		background: '#FFFFFF',
		pixelRatio: 1,
		categories: categories,
		series: [{
			area: [],
			color: this.seriesColor,
			data: seriesData,
			index: 0,
			name: ' ',
			show: true,
			type: 'line'
		}],
		animation: false,
		xAxis: {
			type: 'grid',
			gridColor: '#fff',
			gridType: 'dash',
			dashLength: 8,
			axisLine: false,
			disabled: true,
			disableGrid: true,
			// labelCount: 100,
		},

		yAxis: {
			// gridType: 'dash',
			// gridColor: '#ee1',
			// dashLength: 8,
			// splitNumber: 10,
			// min: 0,
			// max: 0.8,
			disabled: true,
			disableGrid: true,
		},

		width: this.width,
		height: this.height,
		// width: this._self.cWidth * this._self.pixelRatio,
		// height: this._self.cHeight * this._self.pixelRatio,
		extra: {
			line: {
				lineStyle: 'straight',
				line: {
					width: '1',
				}
			}
		}
	};
}

/**
 * 修改uchart配置
 * 
 * @param object config 修改uchart配置的对象参数，详细可参考官方文档
 * 						@link http://www.mianshigee.com/tutorial/ucharts/0d52b38bdad55cff.md
 */
ChartUI.prototype.updateConfig = function(config) {
	if (Object.getOwnPropertyNames(config).length == 0) {
		return;
	}

	for (let [key, value] of Object.entries(config)) {
		if (typeof(value) == 'object') {
			if (this.config[key] == undefined) {
				this.config[key] = value;
			} else {
				this.config[key] = Object.assign(this.config[key], value);
			}
		} else {
			this.config[key] = value;
		}
	}
}

ChartUI.prototype.test = function() {
	console.log('chart-ui test');
};

ChartUI.prototype.render = function() {
	this.initConfig();
	// console.log('chartui');
	// console.log(this.config.series);
	// this.config.series[0]['data'] = new Array(this.seriesNum).fill(0);
	this.uchart = new uCharts(this.config);
}

if (typeof module === "object" && typeof module.exports === "object") {
	module.exports = ChartUI;
	//export default Charts;//建议使用nodejs的module导出方式，如报错请使用export方式导出
}
